<template>
  <div id="bl-header">
    <div id="nav">
      <div class="inl" id="logo">
        <img style="vertical-align: middle " src="../assets/logo.png">
        <el-link href="/" :underline="false" style="font: 40px 'Segoe Print;color:#ee5b7a">{{ station }}</el-link>
      </div>
      <div id="option" class="inl">
        <div class="inl op" v-for="ni in nva_item">
          <el-link type="primary" :underline="false">{{ ni }}</el-link>
        </div>
      </div>
    </div>
    <div class="inl" id="search">
      <div class="inl" id="s-in">
        <el-input type="primary" v-model="searchInfo" style="width:300px;" size="small"></el-input>
      </div>
      <div class="inl" id="s-bt">
        <el-button type="primary" icon="el-icon-search" size="small" @click="search" round>搜索</el-button>
      </div>
    </div>
    <div id="user">
      <div id="avatar" class="inl">
        <el-avatar style="vertical-align: middle "
                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-link type="primary" :underline="false">{{ user.name }}</el-link>
      </div>
      <div id="u-info" class="inl">
        <div id="message" class="inl u-info">
          <el-link icon="el-icon-s-comment" :underline="false" type="primary" class="db-info"></el-link>
          <el-link type="primary" :underline="false" class="db-info">消息</el-link>
        </div>
        <div id="dynamic" class="inl u-info">
          <el-link icon=" el-icon-info" :underline="false" type="primary" class="db-info"></el-link>
          <el-link type="primary" :underline="false" class="db-info">动态</el-link>
        </div>
        <div id="collect" class="inl u-info">
          <el-link icon="el-icon-star-on" :underline="false" type="primary" class="db-info"></el-link>
          <el-link type="primary" :underline="false" class="db-info">收藏</el-link>
        </div>
        <div id="his" class="inl u-info">
          <el-link icon="el-icon-s-order" :underline="false" type="primary" class="db-info"></el-link>
          <el-link type="primary" :underline="false" class="db-info">历史</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BLHeader",
  methods: {
    search: function () {
      alert(this.searchInfo)
    }
  },
  data() {
    return {
      nva_item: ['热门', '动漫', '游戏', '音乐', '综艺', '动画', '鬼畜'],
      searchInfo: "",
      station: "artless",
      user: {
        name: "arturiamu",
        sex: "男",
        age: 20
      },
    }
  }
}
</script>

<style scoped>
#nav {
  width: 40%;
  height: 100%;
  display: inline-block;
}

#option {
  height: 100%;
}

.op {
  margin-left: 20px;
}

#search {
  /*width: 40%;*/
  margin-left: 70px;
  background-color: #f6f6f6;
  border-radius: 7px;
}

#user {
  margin-left: 15%;
  height: 100%;
  display: inline-block;
}

#logo {
  padding-left: 10px;
}
#s-bt {
  padding: 7px 7px 7px 25px;
}

#s-in {
  padding-left: 5px;
}

#u-info {
  position: relative;
  top: 10px;
  left: 10px;
}

.u-info {
  padding-left: 10px;
  text-align: center;
}

.db-info {
  display: block;

}
</style>